<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <title>函数图像</title>
  <script src="calculator.js"></script>
</head>
<!-- API参考：https://www.desmos.com/api/v1.7/docs/index.html -->

<body>
  <div id="calculator" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        z-index: 9999;
      "></div>

  <script>
    //关于画布的设置
    var elt = document.getElementById("calculator");
    var calculator = Desmos.GraphingCalculator(elt, {
      autosize: false,
      expressionsCollapsed: true,
      settingsMenu: false,
    });
    //设置图像边界
    calculator.setMathBounds({
      left: -5,
      right: 5,
      bottom: -3,
      top: 3,
    });
    //calculator.updateSettings({ fontSize: 16 });//设置字体大小
    calculator.updateSettings({ language: "zh-CN" }); //设置语言
    //calculator.updateSettings({ keypad: false });//设置键盘
    //绘制图形
    calculator.setExpressions([
      {
        id: "graph1",
        latex: "y=\\sin(x)",
        color: "#c74440",
        lineStyle: Desmos.Styles.SOLID,
        /*曲线的三种模式 SOLID 实线,DASHED 虚线,DOTTED 点线*/
      },
      { id: "graph2", latex: "y=\\sin(2x)", color: "#2d70b3" },
      { id: "graph3", latex: "y=\\sin(3x)", color: "#388c46" },
      { id: "graph4", latex: "y=\\sin(4x)", color: "#6042a6" },
    ]);
  </script>
</body>

</html>